{include file='common/head'}
<div style="overflow-x: hidden;width: 96%;margin: auto;padding-top: 1rem;">
    <blockquote class="layui-elem-quote layui-text">
        鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <a href="/doc/base/faq.html#form" target="_blank">为什么select/checkbox/radio没显示？</a> 2. <a href="/doc/modules/form.html#render" target="_blank">动态添加的表单元素如何更新？</a>
    </blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>表单集合演示</legend>
    </fieldset>

    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <div class="layui-form">
    </div>



    <!--<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>-->
    <form class="layui-form" action="{:url('Index/shous')}">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="title" id="user_name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
            <button class="layui-btn"  lay-submit lay-filter="formDemo">
                <i class="layui-icon">&#xe615;</i> 搜索
            </button>
            </div>
            <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option value="1">layer</option>
                </select>
            </div>
        </div>
    </form>
    <!--<div class="demoTable">-->
        <!--搜索ID：-->
        <!--<div class="layui-inline">-->
            <!--<input class="layui-input" name="user_name" id="demoReload" autocomplete="off">-->
        <!--</div>-->
        <!--<button class="layui-btn" data-type="reload">搜索</button>-->
    <!--</div>-->
    <table class="layui-table" lay-data="{height:332, url:'{:url('Index/user')}', page:true, id:'testReload',loading:true}" lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
            <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
            <th lay-data="{field:'username', width:80}">用户名</th>
            <th lay-data="{field:'image', width:80,templet: '#sexTpl'}">图片</th>
            <th lay-data="{field:'sex', width:80, sort: true,templet: '#images'}">性别</th>
            <th lay-data="{field:'city', width:80}">城市</th>
            <th lay-data="{field:'sign', width:160}">签名</th>
            <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
            <th lay-data="{field:'classify', width:80}">职业</th>
            <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
            <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>
            <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
        </tr>
        </thead>
    </table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="sexTpl">
        <img src="{{ d.header_img }}" style="height: 20px;"  lay-event="detail_content">
    </script>


</div>
{include file='common/footer'}
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    function form_search() {

    }
    layui.use('table', function(){
        var table = layui.table;

//        //方法级渲染
//        table.render({
//            elem: '#LAY_table_user'
//            ,url: '{:url("Index/user")}'
//            ,cols: [[
//                {checkbox: true, fixed: true}
//                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
//                ,{field:'username', title: '用户名', width:80}
//                ,{field:'sex', title: '性别', width:80, sort: true}
//                ,{field:'city', title: '城市', width:80}
//                ,{field:'sign', title: '签名'}
//                ,{field:'experience', title: '积分', sort: true, width:80}
//                ,{field:'score', title: '评分', sort: true, width:80}
//                ,{field:'classify', title: '职业', width:80}
//                ,{field:'wealth', title: '财富', sort: true, width:135}
//            ]]
//            ,id: 'testReload'
//            ,page: true
//            ,height: 315
//        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

//    layui.use('table', function(){
//        var table = layui.table;
//
//        var $ = layui.$, active = {
//            reload: function(){
//                var demoReload = $('#demoReload');
//
//                //执行重载
//                table.reload('testReload', {
//                    page: {
//                        curr: 1 //重新从第 1 页开始
//                    }
//                    ,where: {
//                        key: {
//                            id: demoReload.val()
//                        }
//                    }
//                });
//            }
//        };
//
//
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title: '很多时候，我们想最大化看，比如像这个页面。',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '400px'],
                    content: '{:url("Index/from")}'
                });
                //iframe窗
//                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            } else if (obj.event === 'detail_content'){
                layer.open({
                    title: '查看更大的图片',
                    maxmin: true, //开启最大化最小化按钮
                    area: ['460px', '460px'],
                    content: "<img width='400px;' src='"+data.header_img+"' />",
                });
            }

        });
        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
        });
//
//        var $ = layui.$, active = {
//            getCheckData: function(){ //获取选中数据
//                var checkStatus = table.checkStatus('idTest')
//                    ,data = checkStatus.data;
//                layer.alert(JSON.stringify(data));
//            }
//            ,getCheckLength: function(){ //获取选中数目
//                var checkStatus = table.checkStatus('idTest')
//                    ,data = checkStatus.data;
//                layer.msg('选中了：'+ data.length + ' 个');
//            }
//            ,isAll: function(){ //验证是否全选
//                var checkStatus = table.checkStatus('idTest');
//                layer.msg(checkStatus.isAll ? '全选': '未全选')
//            }
//        };


        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>